﻿
@{
    ViewBag.Title = "教师设置";
}
<style>
    .td-text-center {
        text-align: center !important;
        display: table-cell !important;
        vertical-align: middle !important;
    }

    .class_checkbox {
        display: inline-block;
        border: 0px solid black;
        margin-right: 10px;
    }
</style>
<div class="title-content">教师设置</div>
<div class="row">
    <div class="col-md-12">
        <!-- BEGIN EXAMPLE TABLE PORTLET-->
        <div class="portlet light ">
            <div class="portlet-body">
                <div class="table-toolbar">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="btn-group">
                                <a class="btn sbold green" href="#updateTeacher" onclick="addShow()" data-toggle="modal">新增老师</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="dataTables_wrapper no-footer">
                    <div class="row">
                        <div class="col-md-6 col-sm-6">
                            <div class="dataTables_length" id="sample_1_length">
                                <label>
                                    显示条数 <select id="changePageSize" onchange="pageSizeChange()" class="form-control input-sm input-xsmall input-inline">
                                        <option value="10">10</option>
                                        <option value="20">20</option>
                                        <option value="50">50</option>
                                    </select>
                                </label>
                            </div>
                        </div>
                        <!--<div class="col-md-6 col-sm-6">
                            <div id="sample_1_filter" class="dataTables_filter">
                                <label><input type="text" id="schoolInput" class="form-control input-sm input-inline" style="width:200px;" placeholder="老师姓名" /></label>
                                <button type="button" class="btn btn-sm blue" onclick="Search()">查找<i class="fa fa-search"></i></button>
                            </div>
                        </div>-->
                    </div>
                    <div class="table-scrollable">
                        <table class="table table-striped table-bordered table-hover order-column dataTable no-footer" role="grid" aria-describedby="sample_1_info">
                            <thead>
                                <tr role="row">
                                    <th rowspan="1" colspan="1" style="width: 200px;">姓名 </th>
                                    <th tabindex="0" rowspan="1" colspan="1" style="width: 110px;"> 性别 </th>
                                    <th class="td-text-center" tabindex="0" rowspan="1" colspan="1" style="width: 110px;"> 手机号码 </th>
                                    <th class="td-text-center" tabindex="0" rowspan="1" colspan="1" style="width: 127px;"> 操作设置 </th>
                                </tr>
                            </thead>
                            <tbody id="gridTable"></tbody>
                        </table>
                        <script id="grid" type="text/html">
                            <% for(var i=0;i
                            <list.length;i++){ %>
                                <% var item=list[i]; %>
                                <tr class="gradeX" role="row" id="<%=item.schoolId %>">
                                    <td><%=item.teacherName %></td>
                                    <td><%=item.sex %></td>
                                    <td class="td-text-center"><%=item.phone %></td>
                                    <td class="td-text-center">
                                        <a class="btn btn-sm green" href="#updateTeacher" onclick="coureSetting('<%= item.id %>')" data-toggle="modal">修改</a>
                                        <a class="btn btn-sm red" onclick="deleteTeacher('<%=item.id%>')">删除</a>
                                    </td>
                                </tr>
                                <%}%>
                        </script>
                    </div>
                    <div class="row">
                        <div class="col-md-5 col-sm-5"><div class="dataTables_info" id="data_info">显示 1 到 10 共 0 条</div></div>
                        <div class="col-md-7 col-sm-7">
                            <!--加载分页控件-->
                            @Html.Partial("DataPager")
                        </div>
                    </div>
                </div>
            </div>
            <!-- END EXAMPLE TABLE PORTLET-->
        </div>
    </div>
</div>

<!--【弹出层】修改教师信息-->
<div id="updateTeacher" class="modal fade" tabindex="-1" data-focus-on="input:first" data-width="660">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
        <h4 class="modal-title">教师设置</h4>
    </div>
    <div class="modal-body">
        <div action="#" class="form-horizontal" role="form">
            <div class="form-group">
                <label for="teacherName" class="col-md-4 control-label">姓名</label>
                <div class="col-md-6">
                    <input type="text" class="form-control" id="teacherName" placeholder="">
                </div>
            </div>
            <div class="form-group">
                <label for="sex" class="col-md-4 control-label">性别</label>
                <div class="col-md-6">
                    <label>
                        <input type="radio" name="sexRadios" id="optionsRadios1" value="男" checked="checked"><span style="display:inline-block;position:relative;top:7px;">男</span>
                    </label>
                    <label style="margin-left:30px;">
                        <input type="radio" name="sexRadios" id="optionsRadios0" value="女"><span style="display:inline-block;position:relative;top:7px;">女</span>
                    </label>
                </div>
            </div>
            <div class="form-group">
                <label for="Kahao" class="col-md-4 control-label">卡号</label>
                <div class="col-md-6">
                    <input type="text" class="form-control" id="Kahao" placeholder="">
                </div>
            </div>
            <div class="form-group">
                <label class="col-md-4 control-label">出生日期</label>
                <div class="col-md-6">
                    <div class="input-group date date-picker" data-date-format="yyyy-mm-dd">
                        <input type="text" class="form-control" id="Bornday" readonly="">
                        <span class="input-group-btn">
                            <button class="btn default" type="button">
                                <i class="fa fa-calendar"></i>
                            </button>
                        </span>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label for="phone" class="col-md-4 control-label">手机</label>
                <div class="col-md-6">
                    <input type="text" class="form-control" id="phone" placeholder="">
                </div>
            </div>
            <div class="form-group">
                <label for="password" class="col-md-4 control-label">密码</label>
                <div class="col-md-6">
                    <input type="text" class="form-control" id="password" placeholder="">
                </div>
            </div>
            <div class="form-group">
                <label for="classid" class="col-md-4 control-label">所属班级</label>
                <div class="col-md-8">
                    <div style="position:relative;left:-5px;">
                        @{
                            List<YouErYuanModels.TClass> classlist = ViewBag.classlist as List<YouErYuanModels.TClass>;
                        }
                        @foreach (var item in classlist)
                        {
                            <div class="class_checkbox"><label><input name="classId" type="checkbox" value="@item.Id" />@item.Classname</label></div>
                        }
                    </div>

                </div>
            </div>
            <div class="form-group">
                <label for="Address" class="col-md-4 control-label">家庭地址</label>
                <div class="col-md-6">
                    <input type="text" class="form-control" id="Address" placeholder="">
                </div>
            </div>

            <div class="form-group">
                <label for="status" class="col-md-4 control-label">状态</label>
                <div class="col-md-6">
                    <select aria-hidden="true" tabindex="-1" id="status" class="form-control select2 select2-hidden-accessible">
                        <option value="1">启用</option>
                        <option value="2">禁用</option>
                    </select>
                </div>
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <input id="Id" type="hidden" />
        <button type="button" data-dismiss="modal" id="closeModel" class="btn btn-outline dark">关闭</button>
        <button type="button" class="btn green" onclick="Submit()">提交</button>
    </div>
</div>

<script type="text/javascript">
    $(function () {
        GridData();
    });

    //显示新增
    function addShow() {
        $("#editTitle").html("新增老师");
        $("#password").val("123456");
        $("#teacherName").val("");
        $("#Kahao").val("");
        $("#phone").val("");
        $("#Bornday").val("");
        //初始化，清除所有的选中
        $("div.class_checkbox span.checked").each(function (index, element) {
            $(element).removeClass("checked");
            $(element).click();
        });
    }

    //改变页大小
    function pageSizeChange() {
        var count = $("#changePageSize").val();
        pageSize = count;
        pageIndex = 1;
        GridData();
    }

    //显示修改
    function coureSetting(id) {
        //初始化，清除所有的选中
        $("div.class_checkbox span.checked").each(function (index, element) {
            $(element).removeClass("checked");
            $(element).click();
        });
        AjaxCustom({
            url: "/TeacherSetting/SelectForId",
            type: "post",
            showLoading: true,
            parames: { id: id },
            callBack: function (obj) {
                var data1 = obj.data.t[0];
                var data2 = obj.data.t2;

                $("#editTitle").text("修改基本信息");
                $("#teacherName").val(data1.teacherName);
                if (data1.sex == "男") {
                    document.getElementById("optionsRadios1").click()
                } else {
                    document.getElementById("optionsRadios0").click()
                }
                $("#phone").val(data1.phone);
                $("#Id").val(data1.id);             
                $("#password").val(data1.password);
                $("#schoolId").val(data1.schoolid);
                $("#classid").val(data1.classid);
                $("#status").val(data1.status);
                $("#Kahao").val(data1.kahao);
                $("#Address").val(data1.address);              
                $("#Bornday").val(data1.bornDay);
                //加载绑定的班级
                $("div.class_checkbox span").each(function (index, element) {
                    var id = $(element).find("input").val();
                    for (var i = 0; i < data2.length; i++) {
                        var classId = data2[i].Id;
                        if (classId == id) {
                            $(element).addClass("checked");
                            $(element).click();//选中
                        }
                    }                   
                });
            }
        });
    }

    //提交
    function Submit() {
        var teacherName = $("#teacherName").val().trim();
        var pwd = $("#password").val().trim();
        var phone = $("#phone").val().trim();
        if (teacherName == "") {
            //$("#teacherName").addClass("errRed");
            $("#teacherName").css("border", "2px solid red");
            $("#teacherName").focus();
            return;
        }
        $("#teacherName").css("border", "");
        if (phone == "") {
            $("#phone").css("border", "2px solid red");
            //$("#phone").addClass("errRed");
            $("#phone").focus();
            return;
        }
        $("#phone").css("border", "");
        if (pwd == "") {
            $("#password").css("border", "2px solid red");
            $("#password").focus();
            return;
        }
        $("#password").css("border", "");

        //获取checkbox的选中值
        var ids = "";
        $("div.class_checkbox span.checked").each(function (index, element) {
            var id = $(element).find("input").val();
            ids += id + ",";
        });
        if (ids.length > 0) {
            ids= ids.substring(0, ids.length - 1);
        }     
        var data = {
            Teachername: $("#teacherName").val(),
            Sex: $('input:radio[name="sexRadios"]:checked').val(),
            Phone: $("#phone").val(),
            //Type: $("#type").val(),
            password: $("#password").val(),
            classid: ids,
            status: $("#status").val(),
            Kahao: $("#Kahao").val(),
            Address: $("#Address").val(),
            //Headimgurl: $("#Headimgurl").val(),
            Id: $("#Id").val(),
            Bornday: $("#Bornday").val()
        };
        AjaxCustom({
            url: "/TeacherSetting/SaveTeacher",
            type: "post",
            showLoading: true,
            loadingMsg: "正在保存",
            parames: data,
            callBack: function (obj) {                
                if (obj.code >= 1) {
                    $("#closeModel").click();//隐藏弹出层
                    AlertMsg("保存成功");
                    pageIndex = 1;
                    GridData();
                } else {
                    AlertMsg(obj.data);
                }
            }
        });
    }

    function GridData() {
        AjaxCustom({
            url: "/TeacherSetting/GetTeacherList",
            type: "post",
            showLoading: true,//是否显示遮罩层
            parames: { pageIndex: pageIndex, pageSize: pageSize },
            callBack: function (obj) {
                var start = (obj.data.pageIndex - 1) * pageSize + 1;
                var end = obj.data.pageIndex * pageSize;
                $("#TotalCount").html(obj.data.total);//总行数
                if (obj.data.total == 0) {
                    $("#data_info").html("");
                    $("#gridTable").html("<tr><td colspan=\"6\" style='text-align:center;'><b style='color:red;'>暂无数据</b></td></tr>");
                    document.getElementById('paging1').innerHTML = "";//分页控件代码为空
                } else {
                    if (pageIndex == obj.data.pageCount) {
                        $("#data_info").html("显示 " + start + " 到 " + obj.data.total + " 共 " + obj.data.total + " 条");
                    } else {
                        $("#data_info").html("显示 " + start + " 到 " + end + " 共 " + obj.data.total + " 条");
                    }
                    //加载数据
                    var gridData = template('grid', obj.data);
                    $("#gridTable").html(gridData);
                    //加载分页控件
                    loadPager(obj.data.pageIndex, obj.data.pageCount);
                }
            }
        });
    }

    //删除教师
    function deleteTeacher(id) {
        var istrue = confirm("确认删除吗？");
        if (istrue) {
            AjaxCustom({
                url: "/TeacherSetting/DeleteTeacher",
                type: "post",
                showLoading: false,//是否显示遮罩层
                parames: { teacherId: id },
                callBack: function (obj) {
                    if (obj.code == 1) {
                        AlertMsg("删除成功");
                        GridData();
                    } else {
                        AlertMsg(obj.data);
                    }
                }
            });
        }
    }

</script>
